<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../layui-v2.6.8/layui/css/layui.css">
    <script src="../layui-v2.6.8/layui/layui.js"></script>
    <script src="../js/laydate.js"></script>
    <script src="../js/jquery-2.1.0.min.js"></script>
    <script src="../js/layer.js"></script>
</head>
<body>
    <button data-method="offset" data-type="b" class="layui-btn layui-btn-normal">下弹出</button>
    <button data-method="offset" data-type="l" class="layui-btn layui-btn-normal">左弹出</button>
    <button data-method="offset" data-type="lt" class="layui-btn layui-btn-normal">左上弹出</button>
    <button data-method="offset" data-type="lb" class="layui-btn layui-btn-normal">左下弹出</button>
    <button data-method="offset" data-type="rt" class="layui-btn layui-btn-normal">右上弹出</button>
    <button data-method="offset" data-type="rb" class="layui-btn layui-btn-normal">右下弹出</button>
    <button data-method="offset" data-type="auto" class="layui-btn layui-btn-normal">居中弹出</button>
    <div id="layerBtn" class="layui-btn">弹出layui按钮</div>
  </div>
  <script>
 // 挂载layui，添加jquery和form 一会我们会用到
 layui.use('form', function () {
    // 这个时候将挂载到layui中的layer放置到一个变量上面，有助于我们调用
    var form = layui.form
    // 首先第一种调用方法就是(采用的是jquery的点击事件)
    $('#layerBtn').on('click', function (e) {
      // 调用的layer弹窗
      layer.msg('我调用了，我是layer弹窗')
    })
  });
  </script>
</body>
</html>